<template>
  <div id="map_container" style="width: 100%; height: 100%">
    <div id="map" class="map" style="width: 100%; height: 100%;"></div>
    <div class="sea-popover sea-popover-arrow-left test" ref="popoverRef">
      <p>this is a container</p><p>this is a container</p><p>this is a container</p><p>this is a container</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import UltimatePopover from "./ultimate-popover";

import Style from 'ol/style/Style';
import {onMounted, onUnmounted, ref} from "vue";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import Overlay from "ol/Overlay";

const popoverRef = ref();

/**
 * 使用 ultimate-popover.ts
 *
 * 兼容 vue 组件，使用上，没什么明显缺点；
 * 但是实现方案不好，因为会反复刷新界面，浪费机器性能。
 */
const popover = new UltimatePopover();
popover.offset = 10;

onMounted(() => {
    let map = new Map({
        view: new View({
            center: [12950000, 4860000],
            zoom: 4
        }),
        layers: [
            // 底图
            new TileLayer({
                source: new XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'})
            })
        ],
        target: 'map'
    });

    // 鼠标点击事件
    map.on('click', function (evt) {
        console.log(evt.pixel);
    });

    // 通过 innerHTML 添加 HTML 内容作为 Overlay
    const element = document.createElement('div');
    element.style.padding = '10px';
    element.style.backgroundColor = '#3b70ec';
    element.style.borderRadius = '6px';
    element.style.color = '#ffffff';
    element.innerHTML = '<strong>标题:</strong> 这是一个HTML Overlay<br><span>更多信息...</span>';

    // 工程点位点击事件
    element.addEventListener('click', function (evt) {
        popover.setRef(evt.currentTarget);
        popover.refresh();
    });


    const htmlOverlay = new Overlay({
        position: [12950000, 4860000],
        element: element,
        positioning: 'top-left',
    });
    map.addOverlay(htmlOverlay);

    // popover 设置 dom 对象
    const dom = popoverRef.value;
    popover.setDom(dom);

    // popover 设置限制范围
    const box = document.getElementById('map_container');
    popover.setBox(box);

    // 使用定时任务绑定位置
    popover.bindInterval();
})

onUnmounted(()=>{
    // 清除定时任务
    popover.unbindInterval();
})

</script>

<style>
.map {
    width: 100%;
    height: 400px;
}

</style>